<template>
  <div class="borderRed">
    <div class="spanWidth">
      <span>{{ props.border.nameVal }}</span>
      <span>{{ props.border.value }}</span>
    </div>
    <div class="rectangleBorder">
      <div class="borderBlue">
        <el-icon><Top /></el-icon>
        <span>{{ props.border.percentage }}</span>
      </div>
      <div class="lastYue">同比上月</div>
    </div>
  </div>
</template>
<script  setup>
import { Top } from "@element-plus/icons-vue";
import { ref, watch, onMounted, defineProps, reactive, nextTick } from "vue"; //vue函数什么周期
const props = defineProps({
  border: {
    type: Object,
  },
});
</script>

<style lang="less" scoped>
.borderRed {
  width: 249px;
  height: 91px;
  background-image: url("../assets/iconBorder/3-biankuang.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-evenly;
  .spanWidth {
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    span:first-child {
      color: #8e939a;
      font-size: 14px;
    }
    span:last-child {
      margin-top: 4px;
      color: #bac6cc;
      // font-size: 24px;
      font-size: 22px;
    }
  }
  .rectangleBorder {
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .borderBlue {
      width: 87px;
      height: 34px;
      margin: 0 auto;
      border-radius: 2px 2px 2px 2px;
      border: 1px solid rgba(2, 140, 218, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      /deep/.el-icon {
        color: #028cda;
        font-size: 22px;
      }
      span:last-child {
        margin-left: 4px;
        color: #bac6cc;
        font-size: 18px;
      }
    }
    .lastYue {
      margin-top: 4px;
      font-size: 12px;
      color: #8e939a;
      text-align: center;
      display: block;
    }
  }
}
</style>